<!--
 * @Author: your name
 * @Date: 2022-04-16 22:08:42
 * @LastEditTime: 2022-04-16 23:06:42
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \job-master\web\src\views\dashboard\components\ExperienceSegment.vue
-->
<template>
  <!--热门行业用人需求top10-->
  <div class="container">
    <div id="box1" class="echarts_container"></div>
  </div>
</template>

<script>
export default {
  mounted() {
     // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(document.getElementById("box1"));
    //绘制图表
    myChart.setOption({
  title: {
    text: '热门行业用人需求top10'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['小学教师', '软件开发工程师', 'java初级开发工程师', '短视频剪辑', '计算机教师', 'web前端']
  },
  series: [
    {
      name: '2021',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2022',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
})
  
}
}
</script>


<style lang="scss" scoped>
.container{
  .tag{
    position: absolute;
     top: 0;
     left: 58px;
  }
   .echarts_container{
    width: 830px;
    height: 410px;
  }
}
</style>
